﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>KM问卷调查结果</title>
    <meta charset="utf-8" />
    <link href="../../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../css/font-awesome.min.css" rel="stylesheet" />
    <link href="../../js/plugins/layer/skin/layer.css" rel="stylesheet" />
    <script src="../../js/jquery-2.1.1.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/plugins/layer/layer.min.js"></script>
    <script src="../../js/echarts.js"></script>
    <style>
     
        label {
            font-size: 28px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
     
        <div class="col-md-12 column">
            <div class="col-md-10 col-lg-10 col-xs-10 col-sm-10  text-center font-color-default"><label>KM问卷调查结果</label>
              
                <!--<div class="btn btn-primary col-md-10 col-lg-10  col-xs-10 col-sm-10 col-lg-offset-3">加载问卷调查数据</div>-->
            
                <div id="chart_a" style="width: 700px; height: 400px;"></div>
                <div id="chart_b" style="width: 700px; height: 400px;"></div>
                <div id="chart_c" style="width: 700px; height: 400px;"></div>
                <div id="chart_d" style="width: 700px; height: 400px;"></div>
                <div id="chart_e" style="width: 700px; height: 400px;"></div>
                <div id="chart_f" style="width: 700px; height: 400px;"></div>
                <div id="chart_g" style="width: 700px; height: 400px;"></div>
                <div id="chart_h" style="width: 700px; height: 400px;"></div>
                <div id="chart_i" style="width: 700px; height: 400px;"></div>
             
            </div>
        </div>
    </div>
</div>
   
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    $(function () {
        var index = 0;
        //年龄
        var arr_name_a = [];
        var arr_value_a = [];

        var arr_name_b = [];
        var arr_value_b = [];

        var arr_name_c= [];
        var arr_value_c = [];

        var arr_name_d = [];
        var arr_value_d = [];

        var arr_name_e = [];
        var arr_value_e = [];

        var arr_name_f = [];
        var arr_value_f = [];

        var arr_name_g = [];
        var arr_value_g = [];

        var arr_name_h= [];
        var arr_value_h = [];

        var arr_name_i= [];
        var arr_value_i = [];
           
        var loadData = function () {
          
            var s = layer.load(0, {
                shade: [0.2, '#fff'] //0.1透明度的白色背景
            });
            
            $.post("Posthandler.ashx",
                { "action": "GetResult" },
                function (data) {
                    if (data.Success == true) {
                        if (data.Data.length > 0) {
                            data.Data.map(function(item, i) {
                                if (item.Memo == "a") {
                                    arr_name_a.push(item.ageRemark);
                                    arr_value_a.push(item.num);
                                }
                                if (item.Memo == "b") {
                                    arr_name_b.push(item.ageRemark);
                                    arr_value_b.push(item.num);
                                }
                                if (item.Memo == "c") {
                                    arr_name_c.push(item.ageRemark);
                                    arr_value_c.push(item.num);
                                }
                                if (item.Memo == "d") {
                                    arr_name_d.push(item.ageRemark);
                                    arr_value_d.push(item.num);
                                }
                                if (item.Memo == "e") {
                                    arr_name_e.push(item.ageRemark);
                                    arr_value_e.push(item.num);
                                }
                                if (item.Memo == "f") {
                                    arr_name_f.push(item.ageRemark);
                                    arr_value_f.push(item.num);
                                }
                                if (item.Memo == "g") {
                                    arr_name_g.push(item.ageRemark);
                                    arr_value_g.push(item.num);
                                }
                                if (item.Memo == "h") {
                                    arr_name_h.push(item.ageRemark);
                                    arr_value_h.push(item.num);
                                }
                                if (item.Memo == "i") {
                                    arr_name_i.push(item.ageRemark);
                                    arr_value_i.push(item.num);
                                }
                                  
                                bindChart("a", "您的年龄是？", '#FCCE10', arr_name_a, arr_value_a);
                                bindChart("b", "您目前从事的职业是？", '#E87C25', arr_name_b, arr_value_b);
                                bindChart("c", "您对KM产品质量如何评价？", '#27727B', arr_name_c, arr_value_c);
                                bindChart("d", "您认为KM产品的款式如何？", '#FE8463', arr_name_d, arr_value_d);
                                bindChart("e", "您对我们的产品价格如何评价？", '#9BCA63', arr_name_e, arr_value_e);
                                bindChart("f", "您认为KM品牌的服务如何？", '#F4E001', arr_name_f, arr_value_f);
                                bindChart("g", "店铺购物环境是否令您满意？", '#F0805A', arr_name_g, arr_value_g);
                                bindChart("h", "您以后还会再去KM购物吗？", '#26C0C0', arr_name_h, arr_value_h);
                                bindChart("i", "您会推荐KM给身边的朋友吗？", '#60C0DD', arr_name_i, arr_value_i);
                              
                                layer.close(s);
                            });
                        }
                    }
                });
        }

        function bindChart(name, market, colorname, arr_name, arr_value) {
           // var html = "<div id=\"chart_\"+" + name + " style=\"width: 700px; height: 400px;\"></div>";
            var myChart = echarts.init(document.getElementById("chart_"+name));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: market
                },
                tooltip: {},
                legend: {
                    //data: ['销量']
                },
                xAxis: {
                },
                yAxis: {
                    data: arr_name
                },
                series: [{
                    name: market,
                    type: 'bar',
                    barWidth: 10,//柱图宽度
                    barGap:'0.5%',
                    label: {
                        normal: {
                            show: true,
                            position: 'right'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color:colorname
                        }
                    },
                    data: arr_value
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            //$('.main').append(html);
        }
   
            loadData();
         

    });
       
</script>
    
</body>
</html>
